<template>
  <div>
    <div class="myBox"
         :style="{background:'url('+LoginUser.cover+')'}">
      <div class="L"><img :src='LoginUser.avatar' /></div>
      <div class="C">
        <div class="tit">{{LoginUser.nickname?LoginUser.nickname:'这个人没有名字'}}</div>
        <div class="sub">{{LoginUser.email}}</div>
      </div>
      <div class="R"><img src="/assets/images/go.png" /></div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="myboxcon"
         @click="profile">
      <p>修改资料</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon"
         @click="email">
      <p>邮箱认证</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon"
         @click="address">
      <p>我的收货地址</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon"
         @click="order">
      <p>我的订单</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon">
      <p>消费记录</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon">
      <p>充值记录</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="myboxcon"
         @click="logout">
      <p>退出账号</p>
      <img src="/assets/images/go.png">
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <!-- 底部导航 -->
    <Menus />
  </div>
</template>
<script>
import Menus from '../common/Menus.vue'
export default {
  components: {
    Menus,
  },
  data() {
    return {
      LoginUser: this.$cookies.get('LoginUser')
        ? this.$cookies.get('LoginUser')
        : {},
    }
  },
  methods: {
    logout() {
      // 此处用了vant的https://vant-contrib.gitee.io/vant/#/zh-CN/dialog
      // 将Dialog开头改成小写并在前面加this.$
      this.$dialog
        .alert({
          title: '确认退出',
          message: '确认退出粗当前登录的账号嘛',
          closeOnClickOverlay: true,
        })
        .then(() => {
          //   删除cookie
          this.$cookies.remove('LoginUser')
          // 给一个退出成功的提示
          this.$notify({
            type: 'success',
            message: '已成功退出',
            duration: 1500,
            // 跳转地址
            onClose: () => {
              // 跳转到首页 '/'在routers的index,js里面设置的
              this.$router.push('/')
            },
          })
          return false
        })
    },
    profile() {
      this.$router.push('/user/base/Profile')
    },
    address() {
      this.$router.push('/user/address/index')
    },
    email() {
      this.$router.push('/user/base/email')
    },
    order() {
      this.$router.push('/product/product/confirm')
    },
  },
}
</script>
